<template>
  <el-tabs v-model="activeName" class="my-ask" type="card" style="width: 100%">
    <el-tab-pane :label="`我的提问`" name="1">
      <template v-if="listParams.listData.length">
        <ul style="margin-top:0">
          <li v-for="item in listParams.listData" :key="item.id">
            <div class="answerNum" :style="{color:item.replyNum!=='0'?'#fff':'#aaa',backgroundColor: item.replyNum!=='0'?'rgba(61, 109, 234, .5)':'#f4f5f5'}">
              <span>{{ item.replyNum }}</span>
              <span>回答</span>
            </div>
            <div class="questionInfo">
              <span class="articleTitle" @click="$router.push({ name: 'QuestionDetail', params: { id: item.id } })">{{ item.title }}</span>
              <span>
                <font-icon class="icon-shijian" />
                <span style="margin-right:5px">{{ item.createTime }}</span>
                <font-icon class="icon-yanjing" />
                <span>{{ item.hot }}浏览量</span>
              </span>
            </div>
          </li>
        </ul>
        <div>
          <pagenation :params="listParams.pageData" style="float: right" />
        </div>
      </template>
      <empty-data v-else text="暂无数据" />
    </el-tab-pane>
    <el-tab-pane label="我的回答" name="2">
      <template v-if="commentParams.commentData.length">
        <ul style="margin-top:0">
          <li v-for="item in commentParams.commentData" :key="item.id" class="answer-li">
            <div class="title" @click="$router.push({ name: 'QuestionDetail', params: { id: item.postID } })">{{ item.title }}</div>
            <div class="avatar-info">
              <img src="../../../assets/user/Robot_Succ.png" alt="">
              <div class="info">
                <div>{{ item.content }}</div>
                <div>
                  <svg-icon icon-class="icon-shijian" />
                  {{ item.time }}
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div>
          <pagenation :params="commentParams.pageData" style="float: right" />
        </div>
      </template>
      <empty-data v-else text="暂无数据" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import EmptyData from '@/components/EmptyData'
import { getSelfCommunityList, getSelfReplyList } from '@/api/blog'
export default {
  name: 'MyAsk',
  components: {
    EmptyData
  },
  data() {
    return {
      activeName: '1',
      searchParams: {
        pageNum: 0,
        pageSize: 1000
      },
      listParams: {
        listData: [],
        allListData: [],
        pageData: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
          sizeChange: () => {},
          currentChange: () => {}
        }
      },
      commentParams: {
        commentData: [],
        allCommentData: [],
        pageData: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
          sizeChange: () => {},
          currentChange: () => {}
        }
      }
    }
  },
  created() {
    this.getSubmitList()
    this.getCommentList()
  },
  methods: {
    // 获取本人发布提问
    getSubmitList() {
      const vPar = new this.ParamArr()
      vPar.setInt('iStartRow', this.searchParams.pageNum)
      vPar.setInt('iCountRow', this.searchParams.pageSize)
      getSelfCommunityList(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumlist'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['type'] = table.getValueByName('Type')
          node['typeName'] = table.getValueByName('TypeName')
          node['createTime'] = table.getValueByName('CreateTime')
          node['lastTime'] = table.getValueByName('LastTime')
          node['createUser'] = table.getValueByName('CreateUser')
          node['userName'] = table.getValueByName('UserName')
          node['title'] = table.getValueByName('Title')
          node['content'] = table.getValueByName('Content')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          node['collectNum'] = table.getValueByName('CollectNum')
          nodes.push(node)
          table.next()
        }
        this.listParams.listData = nodes
        this.listParams.allListData = nodes

        // 分页操作
        this.listParamsPagenation()
      })
    },
    // 分页操作
    listParamsPagenation() {
      this.listParams.pageData.pageNum = 1
      const allListData = this.listParams.allListData
      const pageNum = this.listParams.pageData.pageNum
      const pageSize = this.listParams.pageData.pageSize

      this.listParams.pageData.total = allListData.length

      // 显示数据
      this.listParams.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)

      this.listParams.pageData.sizeChange = (pageSize) => {
        this.listParams.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
      this.listParams.pageData.currentChange = (pageNum) => {
        if (allListData.length < pageSize) {
          return (this.listParams.pageData.pageNum = 1)
        }
        this.listParams.listData = allListData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
    },
    // 获取本人评论列表
    getCommentList() {
      const vPar = new this.ParamArr()
      vPar.setInt('iStartRow', this.searchParams.pageNum)
      vPar.setInt('iCountRow', this.searchParams.pageSize)
      getSelfReplyList(vPar).then(vPar => {
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumreply'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['pid'] = table.getValueByName('PID') || 0
          node['postID'] = table.getValueByName('PostID')
          node['userID'] = table.getValueByName('UserID')
          node['userName'] = table.getValueByName('UserName')
          node['time'] = table.getValueByName('Time')
          node['content'] = table.getValueByName('Content')
          node['title'] = table.getValueByName('Title')
          nodes.push(node)
          table.next()
        }
        this.commentParams.commentData = nodes
        this.commentParams.allCommentData = nodes

        // 分页操作
        this.commentParamsPagenation()
      })
    },
    // 分页操作
    commentParamsPagenation() {
      this.commentParams.pageData.pageNum = 1
      const allCommentData = this.commentParams.allCommentData
      const pageNum = this.commentParams.pageData.pageNum
      const pageSize = this.commentParams.pageData.pageSize

      this.commentParams.pageData.total = allCommentData.length

      // 显示数据
      this.commentParams.commentData = allCommentData.slice((pageNum - 1) * pageSize, pageNum * pageSize)

      this.commentParams.pageData.sizeChange = (pageSize) => {
        console.log(pageSize)
        this.commentParams.commentData = allCommentData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
      this.commentParams.pageData.currentChange = (pageNum) => {
        console.log(pageNum)
        if (allCommentData.length < pageSize) {
          return (this.commentParams.pageData.pageNum = 1)
        }
        this.commentParams.commentData = allCommentData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  padding-left: 0;
  li {
    list-style: none;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b4c4d2;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}
.answerNum {
  width: 45px;
  height: 45px;
  background-color: #f4f5f5;
  font-size: 12px;
  color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}
.questionInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  >span {
    font-size: 12px;
    color: #b4c4d2;
  }
  .articleTitle {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
.answer-li {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-bottom: 0;
  padding-left: 10px;
  .avatar-info {
    display: flex;
    align-items: center;
  }
  .title {
    font-size: 14px!important;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
.answer-li img{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.answer-li div:nth-child(1){
  width: 100%;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  // max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.answer-li div:nth-child(2) {
  font-size: 12px;
  color: #b4c4d2;
  line-height: 20px;
}

::v-deep.el-tabs--card>.el-tabs__header {
  border-bottom: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__item {
  border-left: none;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    border-left: 1px solid #E4E7ED;
    transform: translateY(-50%);
    height: 50%;
  }
  &:first-child {
    &::before {
      display: none;
    }
  }
}
.my-ask {
  ::v-deep .el-tabs__item.is-active {
    color: $primaryColor;
  }
}
</style>
